<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>李育松Element UI学习笔记</title>
  <!-- 引入ElementUI的CSS -->
  <link href="https://cdn.jsdelivr.net/npm/element-ui@2.15.10/lib/theme-chalk/index.min.css" rel="stylesheet">
  <!-- 引入Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
  <!-- 引入ElementUI组件库 -->
  <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.10/lib/index.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* 简化全局样式 */
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      color: #333;
      line-height: 1.6;
      min-height: 100vh;
    }

    /* 简化导航栏样式 */
    .header {
      background-color: #409EFF;
      color: white;
      padding: 0;
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .mobile-menu {
      display: none;
      padding: 12px 20px;
    }

    /* 内容区域样式简化 */
    .content {
      padding: 15px;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* 简化卡片样式 */
    .el-card {
      border-radius: 5px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      border: 1px solid #ddd;
      margin-bottom: 15px;
      background: white;
    }

    .el-card__header {
      background-color: #ecf5ff;
      border-bottom: 1px solid #ddd;
      padding: 12px 15px;
      color: #333;
      font-weight: bold;
      font-size: 16px;
    }

    .el-card__body {
      padding: 15px;
    }

    /* 简化表格样式 */
    .el-table {
      border: 1px solid #ddd;
    }

    .el-table th {
      background-color: #f5f7fa;
    }

    /* 简化轮播图样式 */
    .el-carousel {
      border-radius: 5px;
      margin-bottom: 15px;
    }

    .carousel-slide {
      height: 100%;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }

    .carousel-content {
      padding: 20px;
      text-align: center;
      max-width: 80%;
    }

    .carousel-content h3 {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    /* 简化步骤条样式 */
    .el-steps {
      padding: 15px;
      background: #f8fbff;
      border-radius: 5px;
    }

    /* 简化树形控件样式 */
    .el-tree {
      background: #f8fbff;
      border-radius: 5px;
      padding: 10px;
      border: 1px solid #ddd;
    }

    /* 特色卡片简化 */
    .feature-card {
      text-align: center;
      padding: 15px;
    }

    .feature-card i {
      font-size: 36px;
      color: #409EFF;
      margin-bottom: 10px;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
      .desktop-menu {
        display: none;
      }

      .mobile-menu {
        display: block;
      }

      .carousel-content h3 {
        font-size: 20px;
      }

      .el-col {
        margin-bottom: 10px;
      }
    }

    /* 简化底部样式 */
    .footer {
      text-align: center;
      padding: 15px;
      background-color: #409EFF;
      color: white;
      margin-top: 20px;
      font-size: 14px;
    }



    /* 代码块样式简化 */
    pre {
      background: #f5f5f5;
      color: #333;
      padding: 10px;
      border-radius: 5px;
      overflow-x: auto;
      font-size: 14px;
      border: 1px solid #ddd;
    }

    /* 移除动画效果 */


    /* 初学者风格的调整 */
    h1,
    h2,
    h3 {
      color: #333;
    }

    .el-button {
      margin: 5px;
    }

    .el-tag {
      margin: 2px;
    }

    .el-col {
      margin-bottom: 10px;
    }

    .el-divider {
      margin: 15px 0;
    }

    .el-timeline {
      margin-left: 20px;
    }

    /* 初学者可能不会使用复杂的布局 */
    .feature-list .el-col {
      margin-bottom: 15px;
    }

    .feature-item {
      padding: 10px;
      border: 1px solid #eee;
      border-radius: 5px;
      background: #f9f9f9;
    }

    .custom-tree-node i {
      margin-right: 5px;
      color: #409EFF;
    }

    /* 简化菜单样式 */
    .el-menu {
      background-color: #409EFF !important;
    }

    .el-menu-item {
      font-size: 14px !important;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="mobile-menu">
        <el-dropdown @command="handleCommand" trigger="click">
          <span class="el-dropdown-link">
            <i class="fas fa-bars"></i> 菜单
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="home"><i class="fas fa-home"></i> 首页</el-dropdown-item>
            <el-dropdown-item command="what"><i class="fas fa-info-circle"></i> 什么是Element UI？</el-dropdown-item>
            <el-dropdown-item command="features"><i class="fas fa-list"></i> Element UI的功能</el-dropdown-item>
            <el-dropdown-item command="layout"><i class="fas fa-mobile-alt"></i> 响应式布局</el-dropdown-item>
            <el-dropdown-item command="components"><i class="fas fa-th"></i> 组件库</el-dropdown-item>
            <el-dropdown-item command="breakpoint"><i class="fas fa-ruler"></i> 断点系统</el-dropdown-item>
            <el-dropdown-item command="hide"><i class="fas fa-eye-slash"></i> 隐藏元素</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <div class="desktop-menu">
        <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" background-color="#409EFF"
          text-color="white" active-text-color="#ffd04b">
          <el-menu-item index="home"><i class="fas fa-home"></i> 首页</el-menu-item>
          <el-menu-item index="what"><i class="fas fa-info-circle"></i> 什么是Element UI？</el-menu-item>
          <el-menu-item index="features"><i class="fas fa-list"></i> Element UI的功能</el-menu-item>
          <el-menu-item index="layout"><i class="fas fa-mobile-alt"></i> 响应式布局</el-menu-item>
          <el-menu-item index="components"><i class="fas fa-th"></i> 组件库</el-menu-item>
          <el-menu-item index="breakpoint"><i class="fas fa-ruler"></i> 断点系统</el-menu-item>
          <el-menu-item index="hide"><i class="fas fa-eye-slash"></i> 隐藏元素</el-menu-item>
        </el-menu>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="content">
      <!-- 走马灯效果（轮播图） -->
      <el-carousel height="300px" indicator-position="outside" arrow="always">
        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
          <div class="carousel-slide" :style="{ backgroundImage: `url(${item.imgUrl})` }">
            <div class="carousel-content">
              <h3>{{ item.title }}</h3>
              <p v-if="item.description">{{ item.description }}</p>
              <el-button type="primary" size="medium" style="margin-top: 10px;">开始学习</el-button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>





      <!-- 学习笔记内容 -->
      <div v-show="activeIndex === 'home'">
        <el-card>
          <div slot="header" class="clearfix">
            <span>欢迎学习Element UI</span>
          </div>
          <div>
            <p>Element UI是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，提供了丰富的组件和功能，帮助您快速构建美观、易用的Web应用程序。</p>

            <el-row :gutter="15">
              <el-col :span="8" v-for="(card, index) in featureCards" :key="index">
                <el-card class="feature-card">
                  <i :class="card.icon"></i>
                  <h3>{{ card.title }}</h3>
                  <p>{{ card.content }}</p>
                </el-card>
              </el-col>
            </el-row>

            <el-divider></el-divider>

            <h3>学习资源</h3>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-card>
                  <div slot="header">
                    <i class="fas fa-book"></i> 官方文档
                  </div>
                  <p>Element UI提供了完善的官方文档，包含组件的使用说明和示例。</p>
                  <el-button type="text">访问文档 <i class="el-icon-right"></i></el-button>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card>
                  <div slot="header">
                    <i class="fas fa-laptop-code"></i> 示例项目
                  </div>
                  <p>GitHub上有许多使用Element UI的示例项目，可以作为学习参考。</p>
                  <el-button type="text">查看示例 <i class="el-icon-right"></i></el-button>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>

      <div v-show="activeIndex === 'what'">
        <el-card>
          <div slot="header" class="clearfix">
            <span>什么是Element UI？</span>
          </div>
          <div>
            <p>Element UI是一个基于Vue.js的桌面端组件库，提供了丰富的UI组件和功能，帮助开发者快速构建美观、易用的Web应用程序。</p>

            <el-collapse accordion>
              <el-collapse-item title="核心特点" name="1">
                <div class="feature-list">
                  <el-row :gutter="15">
                    <el-col :span="12">
                      <div class="feature-item">
                        <i class="fas fa-check-circle"></i>
                        <h4>一致性设计</h4>
                        <p>标准化的UI组件和交互模式，确保用户体验的一致性</p>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="feature-item">
                        <i class="fas fa-star"></i>
                        <h4>高质量组件</h4>
                        <p>经过精心设计和开发的组件，满足企业级应用需求</p>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="feature-item">
                        <i class="fas fa-mobile-alt"></i>
                        <h4>响应式设计</h4>
                        <p>支持不同屏幕尺寸，提供良好的移动端体验</p>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="feature-item">
                        <i class="fas fa-puzzle-piece"></i>
                        <h4>丰富的组件</h4>
                        <p>超过60个高质量组件，满足各种业务场景需求</p>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
              <el-collapse-item title="适用场景" name="2">
                <el-timeline>
                  <el-timeline-item timestamp="后台管理系统" placement="top">
                    <p>Element UI特别适合开发各类后台管理系统，提供丰富的表格、表单和布局组件</p>
                  </el-timeline-item>
                  <el-timeline-item timestamp="企业级应用" placement="top">
                    <p>为企业级应用提供专业、稳定的UI解决方案</p>
                  </el-timeline-item>
                  <el-timeline-item timestamp="数据展示平台" placement="top">
                    <p>强大的数据展示组件，适合开发数据密集型的应用</p>
                  </el-timeline-item>
                </el-timeline>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-card>
      </div>

      <div v-show="activeIndex === 'features'">
        <el-card>
          <div slot="header" class="clearfix">
            <span>Element UI提供的功能有哪些？</span>
          </div>
          <div>
            <p>Element UI提供了丰富的功能和组件，主要包括以下几个方面：</p>

            <el-tabs v-model="activeName" type="border-card">
              <el-tab-pane label="基础组件" name="first">
                <p>基础组件是构成页面的基本元素，包括按钮、图标、布局等：</p>
                <el-table :data="basicComponents" stripe style="width: 100%">
                  <el-table-column prop="name" label="组件名称" width="180"></el-table-column>
                  <el-table-column prop="description" label="组件描述"></el-table-column>
                  <el-table-column label="使用频率" width="120">
                    <template slot-scope="scope">
                      <el-rate v-model="scope.row.rate" disabled show-text text-color="#ff9900"
                        text-template="{value}"></el-rate>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="表单组件" name="second">
                <p>表单组件用于收集用户输入，包括输入框、选择器、单选框、复选框等：</p>
                <el-table :data="formComponents" stripe style="width: 100%">
                  <el-table-column prop="name" label="组件名称" width="180"></el-table-column>
                  <el-table-column prop="description" label="组件描述"></el-table-column>
                  <el-table-column label="使用频率" width="120">
                    <template slot-scope="scope">
                      <el-rate v-model="scope.row.rate" disabled show-text text-color="#ff9900"
                        text-template="{value}"></el-rate>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="数据展示" name="third">
                <p>数据展示组件包括表格、卡片、标签等用于展示数据的组件：</p>
                <el-table :data="dataComponents" stripe style="width: 100%">
                  <el-table-column prop="name" label="组件名称" width="180"></el-table-column>
                  <el-table-column prop="description" label="组件描述"></el-table-column>
                  <el-table-column label="使用频率" width="120">
                    <template slot-scope="scope">
                      <el-rate v-model="scope.row.rate" disabled show-text text-color="#ff9900"
                        text-template="{value}"></el-rate>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </div>

      <div v-show="activeIndex === 'layout'">
        <el-card>
          <div slot="header" class="clearfix">
            <span>Element UI实现响应式布局的思想是什么？</span>
          </div>
          <div>
            <p>Element UI通过以下几种方式实现响应式布局：</p>

            <el-steps :active="3" finish-status="success" align-center>
              <el-step title="栅格系统" icon="el-icon-s-grid"
                description="Element UI提供了24列的栅格系统，通过el-row和el-col组件实现灵活的布局。"></el-step>
              <el-step title="断点系统" icon="el-icon-monitor"
                description="Element UI定义了五个响应式断点，可以针对不同断点设置不同的布局规则。"></el-step>
              <el-step title="隐藏与显示" icon="el-icon-view"
                description="Element UI提供了基于断点的隐藏和显示类，可以根据屏幕尺寸控制元素的显示与隐藏。"></el-step>
              <el-step title="组件自适应" icon="el-icon-full-screen" description="许多组件内置了响应式行为，如表格、菜单等会自动适应屏幕尺寸。"></el-step>
            </el-steps>

            <el-divider></el-divider>

            <h3>栅格系统示例</h3>
            <el-row :gutter="15">
              <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="n in 4" :key="n">
                <el-card shadow="hover">
                  <div slot="header">栅格项 {{ n }}</div>
                  <p>在不同屏幕尺寸下，此卡片会自适应布局</p>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>

      <div v-show="activeIndex === 'components'">
        <el-card>
          <div slot="header" class="clearfix">
            <span>Element UI提供的组件有哪些？</span>
          </div>
          <div>
            <p>Element UI提供了丰富的组件，主要包括以下几大类：</p>

            <el-tree :data="componentTree" :props="defaultProps" accordion highlight-current>
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <i :class="data.icon"></i>
                <span>{{ node.label }}</span>
              </span>
            </el-tree>

            <el-divider></el-divider>

            <h3>最常用组件</h3>
            <el-row :gutter="15">
              <el-col :span="8" v-for="(comp, index) in topComponents" :key="index">
                <el-card shadow="hover">
                  <div slot="header">
                    <i :class="comp.icon"></i> {{ comp.name }}
                  </div>
                  <p>{{ comp.description }}</p>
                  <el-tag type="success" size="small">使用率: {{ comp.usage }}</el-tag>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>

      <div v-show="activeIndex === 'breakpoint'">
        <el-card>
          <div slot="header" class="clearfix">
            <span>什么是断点？</span>
          </div>
          <div>
            <p>在响应式设计中，断点是指屏幕宽度的特定阈值，当屏幕尺寸达到或超过这个阈值时，页面布局会发生相应的变化。</p>
            <p>Element UI定义了以下五个断点：</p>

            <el-table :data="breakpoints" stripe style="width: 100%">
              <el-table-column prop="name" label="断点名称" width="120"></el-table-column>
              <el-table-column prop="width" label="屏幕宽度" width="150"></el-table-column>
              <el-table-column prop="description" label="描述"></el-table-column>
              <el-table-column label="示例设备" width="180">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.tagType">{{ scope.row.device }}</el-tag>
                </template>
              </el-table-column>
            </el-table>

            <el-divider></el-divider>

            <h3>断点使用示例</h3>
            <el-row :gutter="15">
              <el-col :xs="24" :sm="12" :md="8" :lg="6">
                <el-card shadow="hover">
                  <div slot="header">xs: < 768px</div>
                      <p>在手机上单列显示</p>
                </el-card>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6">
                <el-card shadow="hover">
                  <div slot="header">sm: ≥768px</div>
                  <p>在平板上双列显示</p>
                </el-card>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6">
                <el-card shadow="hover">
                  <div slot="header">md: ≥992px</div>
                  <p>在小桌面上三列显示</p>
                </el-card>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6">
                <el-card shadow="hover">
                  <div slot="header">lg: ≥1200px</div>
                  <p>在桌面上四列显示</p>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>

      <div v-show="activeIndex === 'hide'">
        <el-card>
          <div slot="header" class="clearfix">
            <span>如何设计页面元素在某一尺寸下隐藏？</span>
          </div>
          <div>
            <p>在Element UI中，可以通过以下几种方式在特定屏幕尺寸下隐藏元素：</p>

            <el-tabs v-model="hideMethod" type="card">
              <el-tab-pane label="使用内置类" name="method1">
                <p>Element UI提供了一组内置的响应式隐藏类：</p>
                <el-row :gutter="15">
                  <el-col :span="12">
                    <el-card>
                      <div slot="header">隐藏类示例</div>
                      <ul>
                        <li><el-tag>.hidden-xs</el-tag> - 在超小屏幕下隐藏</li>
                        <li><el-tag>.hidden-sm</el-tag> - 在小屏幕下隐藏</li>
                        <li><el-tag>.hidden-md</el-tag> - 在中等屏幕下隐藏</li>
                        <li><el-tag>.hidden-lg</el-tag> - 在大屏幕下隐藏</li>
                        <li><el-tag>.hidden-xl</el-tag> - 在超大屏幕下隐藏</li>
                      </ul>
                    </el-card>
                  </el-col>
                  <el-col :span="12">
                    <el-card>
                      <div slot="header">显示类示例</div>
                      <ul>
                        <li><el-tag>.visible-xs</el-tag> - 仅在超小屏幕显示</li>
                        <li><el-tag>.visible-sm</el-tag> - 仅在小屏幕显示</li>
                        <li><el-tag>.visible-md</el-tag> - 仅在中等屏幕显示</li>
                        <li><el-tag>.visible-lg</el-tag> - 仅在大屏幕显示</li>
                        <li><el-tag>.visible-xl</el-tag> - 仅在超大屏幕显示</li>
                      </ul>
                    </el-card>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="自定义CSS" name="method2">
                <p>使用自定义CSS媒体查询：</p>
                <pre><code>/* 在小于768px的屏幕上隐藏元素 */
@media (max-width: 767px) {
  .mobile-hidden {
    display: none;
  }
}

/* 在768px到991px之间显示元素 */
@media (min-width: 768px) and (max-width: 991px) {
  .tablet-visible {
    display: block;
  }
}</code></pre>
              </el-tab-pane>
              <el-tab-pane label="使用指令" name="method3">
                <p>使用Element UI的响应式指令：</p>
                <pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;!-- 在xs尺寸下隐藏 --&gt;
    &lt;div v-show="!$isScreen('xs')"&gt;
      此内容在手机上隐藏
    &lt;/div&gt;
    
    &lt;!-- 仅在lg尺寸显示 --&gt;
    &lt;div v-show="$isScreen('lg')"&gt;
      此内容仅在桌面显示
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 底部版权信息 -->
    <div class="footer">
      <p>2024026222李育松 Element UI学习笔记</p>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          activeIndex: 'home',
          activeName: 'first',
          hideMethod: 'method1',
          searchText: '',
          carouselItems: [
            {
              title: 'Element UI 入门指南',
              description: '从基础到进阶，全面掌握Element UI开发',
              imgUrl: '111.png'
            },
            {
              title: '响应式布局实践',
              description: '掌握Element UI的响应式设计，适配各种设备',
              imgUrl: '响应式布局实践3.png'
            },
            {
              title: '丰富的组件库',
              description: '60+高质量组件，满足各种业务场景需求',
              imgUrl: '组件.png'
            },
            {
              title: '高效开发体验',
              description: '提升开发效率，缩短项目周期',
              imgUrl: '高效开发.png'
            }
          ],
          featureCards: [
            { title: '基础组件', content: '按钮、图标、布局等基本元素', icon: 'fas fa-cube' },
            { title: '表单组件', content: '输入框、选择器、表单等', icon: 'fas fa-edit' },
            { title: '数据展示', content: '表格、卡片、走马灯等', icon: 'fas fa-table' }
          ],
          basicComponents: [
            { name: 'Button 按钮', description: '常用的操作按钮', rate: 4.9 },
            { name: 'Icon 图标', description: '语义化的矢量图形', rate: 4.7 },
            { name: 'Layout 布局', description: '用于搭建页面基本结构', rate: 4.8 }
          ],
          formComponents: [
            { name: 'Input 输入框', description: '通过键盘输入内容', rate: 4.9 },
            { name: 'Select 选择器', description: '提供多个选项供用户选择', rate: 4.8 },
            { name: 'Radio 单选框', description: '在一组备选项中进行单选', rate: 4.6 }
          ],
          dataComponents: [
            { name: 'Table 表格', description: '用于展示结构化数据', rate: 4.9 },
            { name: 'Card 卡片', description: '信息卡片容器', rate: 4.7 },
            { name: 'Tag 标签', description: '用于标记和选择', rate: 4.5 }
          ],
          componentTree: [
            {
              label: '基础组件',
              icon: 'fas fa-cube',
              children: [
                { label: 'Button 按钮', icon: 'fas fa-hand-pointer' },
                { label: 'Icon 图标', icon: 'fas fa-icons' },
                { label: 'Layout 布局', icon: 'fas fa-th-large' }
              ]
            },
            {
              label: '表单组件',
              icon: 'fas fa-edit',
              children: [
                { label: 'Input 输入框', icon: 'fas fa-keyboard' },
                { label: 'Select 选择器', icon: 'fas fa-caret-down' },
                { label: 'Form 表单', icon: 'fas fa-list-alt' }
              ]
            },
            {
              label: '数据展示',
              icon: 'fas fa-table',
              children: [
                { label: 'Table 表格', icon: 'fas fa-table' },
                { label: 'Card 卡片', icon: 'fas fa-id-card' },
                { label: 'Carousel 走马灯', icon: 'fas fa-images' }
              ]
            },
            {
              label: '导航组件',
              icon: 'fas fa-bars',
              children: [
                { label: 'Menu 菜单', icon: 'fas fa-bars' },
                { label: 'Tabs 标签页', icon: 'fas fa-folder' },
                { label: 'Dropdown 下拉菜单', icon: 'fas fa-caret-square-down' }
              ]
            }
          ],
          defaultProps: {
            children: 'children',
            label: 'label'
          },
          breakpoints: [
            { name: 'xs', width: '<768px', description: '超小屏幕（如手机）', device: '智能手机', tagType: 'danger' },
            { name: 'sm', width: '≥768px', description: '小屏幕（如平板）', device: '平板电脑', tagType: 'warning' },
            { name: 'md', width: '≥992px', description: '中等屏幕（如小桌面）', device: '小型笔记本', tagType: '' },
            { name: 'lg', width: '≥1200px', description: '大屏幕（如桌面）', device: '台式电脑', tagType: 'success' },
            { name: 'xl', width: '≥1920px', description: '超大屏幕', device: '大尺寸显示器', tagType: 'info' }
          ],
          topComponents: [
            { name: '表格 Table', description: '用于展示大量结构化数据，支持排序、筛选、分页等功能', icon: 'fas fa-table', usage: '98%' },
            { name: '表单 Form', description: '用于收集、校验和提交用户输入数据', icon: 'fas fa-list-alt', usage: '95%' },
            { name: '对话框 Dialog', description: '在保留当前页面状态的情况下弹出对话框', icon: 'fas fa-window-maximize', usage: '90%' }
          ]
        }
      },
      methods: {
        handleSelect(key, keyPath) {
          this.activeIndex = key;
          window.scrollTo({ top: 0, behavior: 'smooth' });
        },
        handleCommand(command) {
          this.activeIndex = command;
          window.scrollTo({ top: 0, behavior: 'smooth' });
        },
        handleNodeClick(data) {
          console.log(data);
        },
        handleTabClick(tab, event) {
          console.log(tab, event);
        }
      }
    })
  </script>


  <a href="../works.html">返回</a>

</body>

</html>